<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>React直接测试</title>
    <style>
        body {
            font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
            margin: 0;
            padding: 20px;
            background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
            min-height: 100vh;
        }
        .container {
            max-width: 800px;
            margin: 0 auto;
            background: white;
            border-radius: 12px;
            padding: 30px;
            box-shadow: 0 10px 30px rgba(0,0,0,0.2);
        }
        .status {
            padding: 15px;
            margin: 10px 0;
            border-radius: 8px;
            font-weight: 500;
        }
        .success { background: #f6ffed; border: 1px solid #b7eb8f; color: #52c41a; }
        .error { background: #fff2f0; border: 1px solid #ffccc7; color: #ff4d4f; }
        .warning { background: #fffbe6; border: 1px solid #ffe58f; color: #faad14; }
        .info { background: #f0f5ff; border: 1px solid #adc6ff; color: #1890ff; }
        #react-test { margin-top: 20px; padding: 20px; border: 2px dashed #d9d9d9; }
        button {
            background: #1890ff;
            color: white;
            border: none;
            padding: 10px 20px;
            border-radius: 6px;
            cursor: pointer;
            margin: 5px;
            font-size: 14px;
        }
        button:hover { background: #40a9ff; }
        .log { background: #f5f5f5; padding: 15px; border-radius: 6px; margin: 10px 0; font-family: monospace; font-size: 12px; max-height: 200px; overflow-y: auto; }
    </style>
</head>
<body>
    <div class="container">
        <h1>🧪 React直接渲染测试</h1>
        
        <div class="info">正在测试React是否能直接渲染到页面...</div>
        
        <div id="test-results"></div>
        
        <div id="react-test">
            <div class="warning">等待React组件渲染...</div>
        </div>
        
        <div class="log" id="console-log"></div>
        
        <button onclick="testReactRender()">重新测试React渲染</button>
        <button onclick="testBasicJS()">测试基础JavaScript</button>
        <button onclick="clearLog()">清空日志</button>
    </div>

    <!-- 直接引入React和ReactDOM -->
    <script crossorigin src="https://unpkg.com/react@18/umd/react.development.js"></script>
    <script crossorigin src="https://unpkg.com/react-dom@18/umd/react-dom.development.js"></script>
    
    <script>
        const { createElement: h, useState, useEffect } = React;
        const { createRoot } = ReactDOM;
        
        let logContainer = document.getElementById('console-log');
        let resultsContainer = document.getElementById('test-results');
        
        function log(message, type = 'info') {
            const timestamp = new Date().toLocaleTimeString();
            const logEntry = document.createElement('div');
            logEntry.innerHTML = `[${timestamp}] ${message}`;
            logContainer.appendChild(logEntry);
            logContainer.scrollTop = logContainer.scrollHeight;
            console.log(`[React Test] ${message}`);
        }
        
        function showResult(message, type) {
            const result = document.createElement('div');
            result.className = `status ${type}`;
            result.innerHTML = message;
            resultsContainer.appendChild(result);
        }
        
        function clearLog() {
            logContainer.innerHTML = '';
            resultsContainer.innerHTML = '';
        }
        
        function testBasicJS() {
            log('测试基础JavaScript功能...');
            try {
                const testObj = { name: 'test', value: 123 };
                const testArray = [1, 2, 3].map(x => x * 2);
                log(`对象测试: ${JSON.stringify(testObj)}`);
                log(`数组测试: ${JSON.stringify(testArray)}`);
                showResult('✅ 基础JavaScript功能正常', 'success');
            } catch (error) {
                log(`JavaScript错误: ${error.message}`, 'error');
                showResult('❌ 基础JavaScript功能异常', 'error');
            }
        }
        
        // 简单的React组件
        function TestComponent() {
            const [count, setCount] = useState(0);
            const [mounted, setMounted] = useState(false);
            
            useEffect(() => {
                log('React组件已挂载，useEffect正常工作');
                setMounted(true);
                return () => log('React组件将卸载');
            }, []);
            
            return h('div', { style: { padding: '20px', background: '#f0f5ff', borderRadius: '8px' } },
                h('h3', { style: { color: '#1890ff', margin: '0 0 15px 0' } }, '✅ React组件渲染成功！'),
                h('p', null, `组件状态: ${mounted ? '已挂载' : '挂载中'}`),
                h('p', null, `计数器: ${count}`),
                h('button', { 
                    onClick: () => {
                        setCount(count + 1);
                        log(`计数器更新: ${count + 1}`);
                    },
                    style: { marginRight: '10px' }
                }, '增加计数'),
                h('button', { 
                    onClick: () => {
                        log('React事件处理正常工作');
                        alert('React组件事件处理成功！');
                    }
                }, '测试事件')
            );
        }
        
        function testReactRender() {
            log('开始测试React渲染...');
            
            try {
                // 检查React是否加载
                if (typeof React === 'undefined') {
                    throw new Error('React库未加载');
                }
                if (typeof ReactDOM === 'undefined') {
                    throw new Error('ReactDOM库未加载');
                }
                
                log('React和ReactDOM库加载成功');
                showResult('✅ React库加载正常', 'success');
                
                // 测试React渲染
                const container = document.getElementById('react-test');
                const root = createRoot(container);
                
                log('创建React根节点成功');
                
                root.render(h(TestComponent));
                
                log('React组件渲染命令已执行');
                showResult('✅ React渲染测试完成', 'success');
                
            } catch (error) {
                log(`React渲染错误: ${error.message}`);
                showResult(`❌ React渲染失败: ${error.message}`, 'error');
            }
        }
        
        // 页面加载完成后自动测试
        window.addEventListener('load', () => {
            log('页面加载完成，开始自动测试...');
            testBasicJS();
            setTimeout(() => {
                testReactRender();
            }, 1000);
        });
        
        // 捕获全局错误
        window.addEventListener('error', (event) => {
            log(`全局错误: ${event.error?.message || event.message}`);
            showResult(`❌ 发现全局错误: ${event.error?.message || event.message}`, 'error');
        });
        
        window.addEventListener('unhandledrejection', (event) => {
            log(`未处理的Promise拒绝: ${event.reason}`);
            showResult(`❌ Promise错误: ${event.reason}`, 'error');
        });
    </script>
</body>
</html>